<template>
    <div>
<!--     面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
<!--      卡片视图-->
      <el-card class="box-card">
        <div  class="text item">
<!--          搜索框-->
          <div style="margin-top: 15px;">
            <el-row :gutter="20">
              <el-col :span="8">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
              </el-col>
              <el-col :span="6">
                <el-button @click="add" type="primary"> 添加用户</el-button>
              </el-col>
            </el-row>
          </div>
<!--          用户列表-->
          <el-table stripe  border :data="userList" style="width: 100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="username" label="姓名" width="180"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="role_name" label="角色"></el-table-column>
            <el-table-column  label="状态">
              <template slot-scope="scope">
<!--                scope可以获取当前列的数据-->
<!--                {{scope.row.ma}}-->
                <el-switch @change="userStateChange(scope.row.id,scope.row.ma)" v-model="scope.row.ma">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
<!--                {{scope.row}}-->
<!--                修改-->
                <el-tooltip effect="dark" content="修改" placement="top">
                <el-button @click="showEdit(scope.row)" size="mini" type="primary"  icon="el-icon-edit"></el-button>
                </el-tooltip>
<!--                删除-->
                <el-tooltip effect="dark" content="删除" placement="top">
                <el-button @click="open(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                </el-tooltip>
<!--                分配角色-->
                <el-tooltip effect="dark" content="分配角色" placement="top">
                  <el-button @click="setRole(scope.row)" size="mini" type="warning" icon="el-icon-share"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--        page-size为当前显示几条-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="num"
          :page-sizes="[2, 4, 8, 10]"
          :page-size="2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        @close="Close"
        width="30%">
<!--        内容主题区-->
        <span>
          <el-form ref="formRef" label-width="100px" :model="form" :rules="formRules"  class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
              <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
              <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
        </el-form>
        </span>
<!--          按钮-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser">添加</el-button>
  </span>
      </el-dialog>
      <el-dialog
        title="修改用户"
        :visible.sync="dialogVisible1"
        @close="EditClose"
        width="30%">
        <!--        内容主题区-->
        <span>
          <el-form ref="formRefEdit" label-width="100px" :model="formEdit" :rules="formRules"  class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formEdit.username"></el-input>
  </el-form-item>
              <el-form-item label="手机" prop="phone">
    <el-input v-model="formEdit.phone"></el-input>
  </el-form-item>
              <el-form-item label="邮箱" prop="email">
    <el-input v-model="formEdit.email"></el-input>
  </el-form-item>
        </el-form>
        </span>
        <!--          按钮-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="adduser">添加</el-button>
  </span>
      </el-dialog>
      <el-dialog title="分配角色" width="50%" :visible.sync="setDialogVisible"
      >
        <div>
          <p>当前的用户：{{userInfo.username}}</p>
          <p>当前的角色：{{userInfo.role_name}}</p>
          <p>分配的新角色：  <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in rolesList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </p>
        </div>
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确定</el-button>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'index',
  created () {
    this.getUserList()
    this.userList = this.data[0].users
    this.num = this.data[0].num
  },
  data () {
    // 验证邮箱
    const checkEmail = (rule, value, cb) => {
      const reEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (reEmail.test(value)) {
        return cb() // 合法回调函数返回true
      }
      cb(new Error('请输入合法的邮箱')) // 不合法时返回此条信息
    }
    return {
      input: '',
      total: '',
      data: [],
      userList: [],
      num: 1,
      dialogVisible: false, // 控制对话框的显示隐藏
      form: {
        username: '',
        password: '',
        email: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }]
      },
      dialogVisible1: false,
      formEdit: {
        username: '',
        phone: '',
        email: ''
      },
      setDialogVisible: false,
      userInfo: {},
      rolesList: [],
      value: ''
    }
  },
  methods: {
    getUserList () {
      // this.$http.get('uers',参数)
      // 分页显示有api接口传入当前页，一页显示条数
      const data = [
        {
          num: 1,
          total: 4,
          users: [
            {
              id: 500,
              role_name: '超级管理员',
              email: '2918623982@qq.com',
              phone: '45621445864',
              ma: true,
              username: 'admin'
            },
            {
              id: 501,
              role_name: 'yo',
              email: '2918623982@qq.com',
              phone: '45621445864',
              ma: true,
              username: 'aa'
            }
          ]
        },
        {
          num: 2,
          total: 4,
          users: [
            {
              id: 503,
              role_name: '超级管理员1',
              email: '2918623982@qq.com',
              phone: '45621445864',
              ma: false,
              username: 'a4min'
            },
            {
              id: 504,
              role_name: 'yo2',
              email: '2918623982@qq.com',
              phone: '45621445864',
              ma: true,
              username: 'aa22'
            }
          ]
        }
      ]
      this.data = data
      this.total = data[0].total
    },
    handleSizeChange () {
      // 监听pagesize每页多少条
    },
    handleCurrentChange (newPage) {
      // 监听页码改变时间
      const data = this.data
      const neuter = data.filter(m => m.num === newPage)
      this.userList = neuter[0].users
    },
    userStateChange (userInfo, state) {
      const num = this.userList.findIndex(x => x.id === userInfo)
      this.userList[num].ma = state
      console.log(this.userList)
    },
    add () {
      this.dialogVisible = true
    },
    Close () {
      // 关闭对话框时间
      this.$refs.formRef.resetFields() // 重置表单
    },
    adduser () {
      // this.$refs.formRef.validate(valid => {
      // if (!valid) return // 校验是否验证通过，通过后执行下面的添加发起请求
      // })
    },
    // 编辑对话框
    showEdit (data) {
      this.dialogVisible1 = true
      this.formEdit = {
        username: data.username,
        email: data.email,
        phone: data.phone
      }
    },
    EditClose () {
      this.$refs.formRefEdit.resetFields()
    },
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id) // 这里可以提交删除信息，更具id删除，还可以写一个判断
        // 因为服务器会返回是否成功的数据进行判断
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    setRole (userInfo) {
      const data = [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项1',
          label: '黄金糕'
        }
      ]
      this.rolesList = data
      this.setDialogVisible = true
      this.userInfo = userInfo
    }
  }
}
</script>

<style lang="less" scoped>

</style>
